const path = require('path')
module.exports = {
  entry: './src/main.js',
  output: {
    //动态获取path的绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      //css-loader只负责对css进行加载
      //style-loader负责将css添加到dom
      //use 解析数组元素的时候时从右向作解析
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      }, {
        test: /\.(png|jpg|gif)$/,
        use: [{
          loader: 'url-loader',
          options: {
            //当加载的图片小于limit时，会把图片变为base64的字符串，
            // 如果大于limit的话，则需要安装file-loader ,而且需要配置publicPath
            limit: 1024,
            name: 'img/[name].[hash:8].[ext]'
          },

        }]
      },
      //ES6转ES5
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },{
        test:/\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  resolve: {
    //import导入的时候省略的文件后缀
    extensions:['.js','.css','.vue'],
    alias: {
      //指定vue版本，不指定会报错，页面解析不出来
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}